import styled from "styled-components";

const Container = styled.div`
    padding: 0 0.5rem;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    height: 100vh;
    min-height: 100vh;
`;
const Main = styled.main`
    padding: 5rem 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    /* align-items: center; */
`;

const Title = styled.h1`
    margin: 0;
    font-size: 4rem;
    text-align: center;
    text-decoration: none;
    position: absolute;
    top: 2vw;
    left: 2vw;
    background-color: #eeeeee;
    padding: 0.5vw;
    border-radius: 5px;

    @media screen and (max-width: 600px) {
        font-size: 2rem;
    }
`;

const Description = styled.p`
    text-align: center;
    line-height: 1.5;
    font-size: 1.5rem;
`;
const CodeTag = styled.code<{ color?: string }>`
    background: #fafafa;
    border-radius: 5px;
    margin: 0 0.75rem;
    padding: 0.75rem;
    font-size: 1.1rem;
    color: ${props => props.color};
    font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New,
        monospace;

    @media screen and (max-width: 600px) {
        font-size: 1rem;
        margin: 0 0.2rem;
        padding: 0.2rem;
    }
`;

export { Container, Main, Title, Description, CodeTag };
